<template>
	<view style="height: 100vh; background-color: #f4f4f4;">
		<layout layoutTitle="补货申请审核">
			<a-spin :spinning="spinning" style="width: 100%" />
			<div class="card-container">
				<a-card v-for="item in data" :key="item.id" class="custom-card" hoverable @click="openDialog(item)">
					<a-row>
						<a-col :span="8" class="user-col">
							<text class="user-text">{{ item.user }}</text>
						</a-col>
						<a-col :span="16" class="info-col">
							<p><strong>状态：</strong>{{ item.applyStatus }}</p>
							<p><strong>申请时间：</strong>{{ item.time }}</p>
							<p><strong>编号：</strong>{{ item.id }}</p>
						</a-col>
					</a-row>
				</a-card>
			</div>
		</layout>

		<uni-popup ref="openButton" type="bottom">
			<uni-popup-dialog type="error" cancelText="驳回" confirmText="通过" title="您真的要处理该项吗？" content=""
				@confirm="TongGuo" @close="BoHui">
				<template #default>
					<view class="close-icon" @click="proxy.$refs.openButton.close()">
						✖
					</view>
				</template>
			</uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<script setup>
	import {
		ref,
		getCurrentInstance
	} from 'vue';
	import {
		listReplenishApply4Audit,
		getReplenishApply,
		auditReplenishApply
	} from "@/api/wmsApply/replenishApply";
	import {
		getQueryData
	} from "@/api/query/comQuery";
	import {
		getDicts
	} from "@/api/system/dict/data";
	const {proxy} = getCurrentInstance();
	const data = ref([]);
	const spinning = ref(true);
	const dialogVisible = ref(false);
	const selectedItem = ref(null);

	async function getDictVaule(name, id) {
		try {
			const ref = await getDicts(name);
			let item = ref.data.find(item => item.dictValue === id) || null;
			return item.dictLabel;
		} catch (error) {
			console.error("获取字典项失败:", error);
			return null;
		}
	}

	async function getQuery(name, id) {
		try {
			const ref = await getQueryData(name);
			let item = ref.data.find(item => item.dictValue === id) || null;
			return item.dictLabel;
		} catch (error) {
			console.error("获取字典项失败:", error);
			return null;
		}
	}

	async function getList() {
		try {
			const ref = await listReplenishApply4Audit({
				pageNum: 1,
				pageSize: 100
			});
			let d = [];
			for (const item of ref.rows) {
				const applyStatus = await getDictVaule("apply_status", item.applyStatus);
				const admin = await getQuery("query_user", item.applyUser);
				d.push({
					user: admin,
					time: item.applyTime,
					applyStatus,
					id: item.serialNo
				});
			}
			data.value = d;
			spinning.value = false;
		} catch (error) {
			console.error("获取列表失败:", error);
		}
	}

	const openDialog = (item) => {
		selectedItem.value = item;
		console.log(proxy)
		proxy.$refs.openButton.open('center')
	};

	function handleAudit(isApproved) {
		console.log(isApproved ? "通过" : "驳回", selectedItem.value);
		dialogVisible.value = false;
	}

	getList();
</script>

<style>
	.card-container {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 28rpx;
		padding: 30rpx;
		background: linear-gradient(145deg, #054d40, #107a6c);
		min-height: 100vh;
		position: relative;
		overflow: hidden;
	}
	
	.card-container::before,
	.card-container::after {
		content: '';
		position: absolute;
		width: 600rpx;
		height: 600rpx;
		border-radius: 50%;
		z-index: 1;
	}
	
	.card-container::before {
		top: -300rpx;
		right: -300rpx;
		background: radial-gradient(circle, rgba(26, 188, 156, 0.2) 0%, rgba(26, 188, 156, 0) 70%);
	}
	
	.card-container::after {
		bottom: -300rpx;
		left: -300rpx;
		background: radial-gradient(circle, rgba(22, 160, 133, 0.2) 0%, rgba(22, 160, 133, 0) 70%);
	}

	.custom-card {
		width: 92%;
		max-width: 700rpx;
		border-radius: 24rpx;
		box-shadow: 0 12rpx 36rpx rgba(0, 0, 0, 0.15);
		overflow: hidden;
		transition: all 0.4s cubic-bezier(0.19, 1, 0.22, 1);
		margin-bottom: 0;
		transform-origin: center;
		position: relative;
		z-index: 2;
		background: rgba(255, 255, 255, 0.9);
		backdrop-filter: blur(20rpx);
		-webkit-backdrop-filter: blur(20rpx);
		border: 1px solid rgba(255, 255, 255, 0.5);
	}

	.custom-card:hover {
		transform: translateY(-3rpx) scale(1.02);
		box-shadow: 0 20rpx 40rpx rgba(0, 0, 0, 0.2);
	}
	
	.custom-card::after {
		content: '';
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 4rpx;
		background: linear-gradient(to right, #1abc9c, #16a085);
	}

	.user-col {
		background: linear-gradient(135deg, #1abc9c, #16a085);
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 40rpx 20rpx;
		color: white;
		font-size: 36rpx;
		font-weight: bold;
		border-top-left-radius: 24rpx;
		border-bottom-left-radius: 24rpx;
		position: relative;
		overflow: hidden;
		box-shadow: inset 0 0 20rpx rgba(0, 0, 0, 0.1);
	}
	
	.user-col::before {
		content: '';
		position: absolute;
		top: -10rpx;
		left: -10rpx;
		width: 40rpx;
		height: 40rpx;
		border-radius: 50%;
		background: rgba(255, 255, 255, 0.1);
		z-index: 1;
	}
	
	.user-col::after {
		content: '';
		position: absolute;
		bottom: -10rpx;
		right: -10rpx;
		width: 60rpx;
		height: 60rpx;
		border-radius: 50%;
		background: rgba(255, 255, 255, 0.08);
		z-index: 1;
	}
	
	.user-text {
		position: relative;
		z-index: 2;
		text-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.2);
		letter-spacing: 2rpx;
	}

	.info-col {
		padding: 30rpx;
		background: linear-gradient(to bottom, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.9));
		border-top-right-radius: 24rpx;
		border-bottom-right-radius: 24rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	.info-col p {
		margin: 16rpx 0;
		font-size: 28rpx;
		color: #333;
		line-height: 1.6;
		position: relative;
		padding-left: 10rpx;
		transition: all 0.3s ease;
	}
	
	.info-col p:hover {
		transform: translateX(4rpx);
	}
	
	.info-col p::before {
		content: '';
		position: absolute;
		left: 0;
		top: 50%;
		width: 6rpx;
		height: 60%;
		transform: translateY(-50%);
		background: #1abc9c;
		border-radius: 3rpx;
	}
	
	.info-col p strong {
		color: #555;
		margin-right: 12rpx;
		font-weight: 600;
		letter-spacing: 1rpx;
	}
	
	.close-icon {
		position: absolute;
		top: 24rpx;
		right: 24rpx;
		font-size: 32rpx;
		color: #666;
		cursor: pointer;
		width: 50rpx;
		height: 50rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 50%;
		background-color: rgba(245, 245, 245, 0.8);
		backdrop-filter: blur(5px);
		-webkit-backdrop-filter: blur(5px);
		z-index: 10;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
		transition: all 0.3s ease;
	}
	
	.close-icon:hover {
		transform: rotate(90deg);
		background-color: rgba(240, 240, 240, 1);
	}
	
	:deep(.ant-card-body) {
		padding: 0;
	}
	
	:deep(.ant-row) {
		display: flex;
		width: 100%;
		min-height: 180rpx;
	}
	
	:deep(.ant-col-8) {
		flex: 0 0 30%;
	}
	
	:deep(.ant-col-16) {
		flex: 0 0 70%;
	}
	
	/* 弹出对话框样式 */
	:deep(.uni-popup__wrapper) {
		border-radius: 40rpx 40rpx 0 0;
		overflow: hidden;
		backdrop-filter: blur(20rpx);
		-webkit-backdrop-filter: blur(20rpx);
	}
	
	:deep(.uni-dialog) {
		border-radius: 24rpx;
		overflow: hidden;
		background: rgba(255, 255, 255, 0.95);
		backdrop-filter: blur(20rpx);
		-webkit-backdrop-filter: blur(20rpx);
		box-shadow: 0 20rpx 60rpx rgba(0, 0, 0, 0.2);
	}
	
	:deep(.uni-dialog-title) {
		font-size: 36rpx;
		color: #16a085;
		font-weight: 600;
		padding: 40rpx 20rpx 20rpx;
		letter-spacing: 2rpx;
	}
	
	:deep(.uni-dialog-content) {
		padding: 30rpx 40rpx 40rpx;
		font-size: 28rpx;
		line-height: 1.6;
		color: #555;
	}
	
	:deep(.uni-dialog-button-group) {
		border-top: 1rpx solid rgba(0, 0, 0, 0.05);
		overflow: hidden;
	}
	
	:deep(.uni-dialog-button) {
		font-size: 32rpx;
		color: #16a085;
		font-weight: 500;
		letter-spacing: 2rpx;
		transition: all 0.3s ease;
		background: linear-gradient(to right, rgba(22, 160, 133, 0.05), rgba(26, 188, 156, 0.1));
	}
	
	:deep(.uni-dialog-button:active) {
		background: rgba(22, 160, 133, 0.15);
	}
</style>